<template>
  <div id="app">
    <div class="header">
      <v-header :seller='seller'></v-header>
    </div>
    <div class="tab-wrapper">
      <tab-bar :tabs="tabs" :initialIndex="0"></tab-bar>
    </div>
  </div>
</template>
/* eslint-disable */
<script>
import header from 'components/header/header.vue'
import tab from 'components/tab/tab.vue'
import seller from 'components/seller/seller.vue'
import goods from 'components/goods/goods.vue'
import ratings from 'components/ratings/ratings.vue'
import { getSeller } from 'api'
import qs from 'query-string'

export default {
  name: "app",
  data() {
    return {
      seller: {
        id: qs.parse(location.search).id
      }
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: '商品',
          component: goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: '评论',
          component: ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: '商家',
          component: seller,
          data: {
            seller: this.seller
          }
        }
      ] 
    }
  },
  created() {
    this._getSeller()
    },
  methods: {
    _getSeller() {
      getSeller({
        id: this.seller.id
      }).then((result) => {
        this.seller = Object.assign({}, this.seller, result)
      })
    }
  },
  components: {
    "v-header": header,
    "tab-bar": tab
  }
}
</script>
<style lang="stylus">
  #app 
    .tab-wrapper
      position: fixed
      top: 136px
      left: 0
      right: 0 
      bottom: 0
</style>
